<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <title>地图打点</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6bOBR0p9u2K5PnjtzWurHzHP"></script>
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="/layer.js"></script>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 800px;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .layui-layer-dialog .layui-layer-content{
        }
    </style>

</head>

<body>
<div class="container"><!-- 这是使用了bootstrap -->
    <div style="width: 100%;height: 40px; border-bottom: 1px solid gray">
        <span>&nbsp;&nbsp;&nbsp;地址定位：</span>
        <input type="text" name="input_site" id="input_site" style="height:30px;line-height:30px;width: 300px;"/>
        <input type = "button" onclick = "searchLocation()" style="width: 100px; height: 35px;" value="查 找" ></input>
        <input type = "button" onclick = "returnOrigin()" style="width: 100px; height: 35px;" value="还原中心点" ></input>
        <!--<input type = "button" onclick = "startAddPoint()" style="width: 100px; height: 35px;" value="标 记" ></input>-->
        <span style="font-size: 12px">【中心点坐标：X：124.124594, Y：50.433805】</span>
        <!--<span>地图打点：</span>
        <input type = "button" style="background-image: url(marker.gif) ; height: 35px; width: 75px; "></input>-->
    </div>
    <div id="allmap"></div>
    <form class="form-horizontal" role="form" action=""
          id="mapMsgForm" method="post">
        <div class="form-group">
            <div class="col-sm-10">
                <input type="text" name="trade_id" >
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointX" value="">
                <!-- 标记坐标 -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="hidden" name="pointY" value="">
                <!-- 标记坐标 -->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default"></button>
            </div>
        </div>
    </form>
</div>
<div id="hiddenid" style="display:none;">
    <div style="padding-top:5px; line-height: 22px; background-color: lightgray;  font-weight: 300;">作物名称：<input id="cropname" name="cropname" type="text" placeholder="" style="width:250px;height: 30px"></div>
    <div style="padding-top:5px; line-height: 22px; background-color: lightgray;  font-weight: 300;">种植面积：<input id="cropmianji" name="cropmianji" type="text" placeholder="" style="width:250px;height: 30px">（亩）</div>
    <div style="padding-top:5px; line-height: 22px; background-color: lightgray;  font-weight: 300;">作物分类：<select id="crop_type" name="crop_type" style="width:250px;height: 30px" th:with="type=${@dict.getType('crop_type')}"><option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
        </select>
    </div>
    <div style="padding-top:5px; line-height: 22px; background-color: lightgray;  font-weight: 300;">生长周期：<select id="crop_year" name="crop_year" style="width:250px;height: 30px" th:with="type=${@dict.getType('crop_year')}">
            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
        </select>
    </div>
    <div style="padding-top:5px; line-height: 22px; background-color: lightgray;  font-weight: 300;">备　　注：<textarea id="remark" name="remark" rows="5"  style="width:300px;height: 50px" ></textarea>
    </div>
</div>
</body>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(124.124594,50.433805), 16);
    map.addControl(new BMap.MapTypeControl({
        mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
    }));
    map.setCurrentCity("加格达奇"); // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    map.setDefaultCursor("pointer");
    map.addEventListener("click", function(e) {//鼠标单击地图触发
        popLayer(e);

    });
    function returnOrigin()
    {
        map.centerAndZoom(new BMap.Point(124.124594,50.433805), 16);
    }

    function popLayer(e) {
        var trade_id='';
        //将经纬度存入form中
        $("input[name='pointX']").val(e.point.lng);
        $("input[name='pointY']").val(e.point.lat);

        //取出经纬度
        pointX = $("input[name='pointX']").val();
        pointY = $("input[name='pointY']").val();
        console.log(pointX);
        layer.open({
            skin: 'layui-layer-rim',
            area: ['460px', '350px'],
            title : '种植作物相关信息：',
            content:$("#hiddenid").removeAttr("style").html(),
            yes : function(index, layero) {
                var cropname=layero.find('#cropname').val();
                var cropmianji=layero.find('#cropmianji').val();
                var sort1=layero.find('#crop_type').val();
                var sort2=layero.find('#crop_year').val();
                var remark=layero.find('#remark').val();
                //点击确认,即提交信息
             $.ajax({
                 type : 'POST',
                 async : true,
                 url : '/cropmanage/insert',
                 data : {
                         "cropName":cropname,
                         "mianji":cropmianji,
                         "lng":pointX,
                         "lat":pointY,
                         "sort1":sort1,
                         "sort2":sort2,
                         "remark":remark
                 },success : function(result){
                     console.log(result);
                     createMaker(e,cropname+" 面积(亩):"+cropmianji);
                 },error : function(){
                     console.log("创建标注失败！");
                 }
             });
                layer.close(index);
            }
        });
    }

    function createMaker(e,dh){
        marker = new BMap.Marker(e.point);
        map.addOverlay(marker);
        map.panTo(e.point);
        /* marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的标记 */
        //创建右键菜单
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
            .bind(marker)));
        marker.addContextMenu(markerMenu);
        //标注
        var text = dh;

        var label = new BMap.Label(text, {
            offset : new BMap.Size(-150, -30)
        });
        //设置label(标注的样式)
        label.setStyle({
            color : "black",
            fontSize : "12px",
            height : "25px",
            fontFamily : "微软雅黑",
            maxWidth : "none",
            width : "150px",
            border : "1px solid #dce1e6",
            "box-shadow": "0 1px 2px #fff inset,0 -1px 0 #a8abae inset"
        });
        marker.setLabel(label);

        //time = time + 1;
    }


    var removeMarker = function(e, ee, marker) {//删除标记

        map.removeOverlay(marker);

//      $.ajax({
//          type : 'POST',
//          async : true,
//          url : '/bpm/bmfw/deleteMaker',
//          data : {
//                  "dh":dh
//          },success : function(result){
//              console.log("删除成功");
//              //成功的话向地图上创建标记和标注
//              map.removeOverlay(marker);
//              time = time - 1;
//          },error : function(){
//              console.log("删除标注失败！");
//          }
//      });
    }


    //根据给定的地址设置地图的中心点
    function searchLocation(){
        var site = $("#input_site").val();
        var option = {
            onSearchComplete: function(results){
                if (local.getStatus() == BMAP_STATUS_SUCCESS){
                    if(results.getCurrentNumPois()){
                        map.centerAndZoom(results.getPoi(0).point,15);
                        //$("#current_city").text(results.city);
                    }
                }else{

                    alert("没有检索到您输入的地址");
                }
            }
        };
        var local = new BMap.LocalSearch(map,option);
        local.search(site);
    }
</script>
</html>